<template>
    <div class="cfmatchlist-cantainer">
        <div class="matchlist-count">该计划已成功匹配<span class="totalCount">{{totalCount}}</span>个项目</div>
        <mt-loadmore :bottom-method="loadBottom" :bottom-all-loaded="allLoaded" ref="matchlistloadmore">
            <CfMatchList :bids="bids" />
        </mt-loadmore>

    </div>
</template>

<script>
  import axios from '~/plugins/axios'
  import { Toast, Indicator } from 'mint-ui'
  import CfMatchList from '../../components/invest/cfmatchlist'
  export default {
    middleware: 'auth',
    head () {
      return {
        title: '匹配列表'
      }
    },
    data () {
      return {
        allLoaded: true,
        bids: [],
        totalCount: 0,
        curPage: 1,
        pageSize: 20
      }
    },
    components: {
      CfMatchList
    },
    mounted () {

    },
    methods: {
      getMatchList () {
        Indicator.open()
        const datas = {orderId: this.$route.params.id, curPage: this.curPage, pageSize: this.pageSize}
        axios.post('/api/cfmatchlist', datas).then((resp) => {
          Indicator.close()
          console.log(resp.data)
          if (resp && resp.data && resp.data.status === 0) {
            this.bids = resp.data.body.bids
            this.totalCount = resp.data.body.totalCount
            if (resp.data.body.totalCount > resp.data.body.bids.length) {
              this.pageSize = this.pageSize + 20
              this.allLoaded = false
              this.$refs.matchlistloadmore.onBottomLoaded()
            } else {
              this.allLoaded = true
              this.$refs.matchlistloadmore.onBottomLoaded()
            }
          } else {
            Toast(resp.data.message || resp.data.responseMessage)
          }
        }).catch(errors => {
          Indicator.close()
          Toast('接口异常')
        })
      },
      loadBottom () {
        if (this.$route.params && this.$route.params.id) {
          this.getMatchList()
        }
      }
    }
  }
</script>
<style scoped lang='sass'>
    .cfmatchlist-cantainer
        padding-top: 2rem
        .matchlist-count
            padding: 0.5rem 0.75rem
            font-size: 0.7rem
            color: #282828
            border-bottom: 1px solid #EFEFEF
            position: fixed
            top: 0
            left: 0
            width: 100%
            z-index: 99
            background: #FFFFFF
            .totalCount
                color: #FF6633
                margin: 0 0.2rem
</style>